<template>
    <div>
        <el-container class="wrapper">
            <el-main class="section text-center">
                <div class="register-bg"></div>
                <el-card class="box-card register-card">
                    <div class="text item">
                        <p class="register-title">账号注册</p>
                        <el-form v-show="!isFace"
                            :model="register"
                            status-icon
                            :rules="rules"
                            ref="register"
                            label-width="80px"
                        >
                            <el-form-item label="用户名" prop="username">
                                <el-input
                                    type="text"
                                    v-model="register.username"
                                    suffix-icon="el-icon-user"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input
                                    type="password"
                                    v-model="register.password"
                                    suffix-icon="el-icon-lock"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="confirm">
                                <el-input
                                    type="password"
                                    v-model="register.confirm"
                                    suffix-icon="el-icon-lock"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码" prop="phone">
                                <el-input
                                    type="text"
                                    v-model="register.phone"
                                    suffix-icon="el-icon-mobile-phone"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input
                                    type="email"
                                    v-model="register.email"
                                    suffix-icon="el-icon-message"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio v-model="register.gender" label="1"
                                    >男</el-radio
                                >
                                <el-radio v-model="register.gender" label="0"
                                    >女</el-radio
                                >
                            </el-form-item>
                        </el-form>
                        <div v-show="isFace" style="border-radius: 30px">
                            <video ref="video" width="400" height="400" autoplay playsinline style="border-radius: 30px"></video>
                            <canvas ref="canvas" width="400" height="400" style="display: none;border-radius: 30px"></canvas>
                        </div>
                        <el-button size="mini" @click="isFace=!isFace">{{isFace?'账号信息':'人脸拍摄'}}</el-button>
                        <el-button
                            :type="btnType"
                            size="mini"
                            @click="upFaceImg('register')"
                            :disabled="disabled"
                        >
                             注册账号
                        </el-button>
                    </div>
                </el-card>

                <div class="register">
                    <p>
                        <router-link to="/login" style="color: black"
                            >已有账号？立即登录</router-link
                        >
                    </p>
                </div>
            </el-main>
        </el-container>
        <el-footer class="footer text-center">
            <copyright></copyright>
        </el-footer>
    </div>
</template>

<script>
import copyright from "@/components/copyright.vue";
import store from "./../store";
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.register.checkPass !== "") {
                    this.$refs.register.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.register.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            isFace:false,
            register: {
                username: "",
                password: "",
                confirm: "",
                email: "",
                phone: "",
                gender: "1",
            },
            iconstyle: "el-icon-document-checked",
            disabled: false,
            btnType: "primary",
            isRealRegister: false,
            rules: {
                password: [
                    {
                        validator: validatePass,
                        trigger: "blur",
                    },
                ],
                confirm: [
                    {
                        validator: validatePass2,
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        copyright,
    },
    mounted(){
      this.startCamera()
    },
    methods: {
        startCamera() {
            const video = this.$refs.video;
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices
                    .getUserMedia({ video: true })
                    .then((stream) => {
                        video.srcObject = stream;
                    })
                    .catch((error) => {
                        console.error("无法访问摄像头:", error);
                    });
            }
        },
        resetForm(register) {
            // console.log(this.$refs[register]);
            this.$refs[register].resetFields();
        },
        registerBtnTest(register) {
            // console.log(this.$refs[register].validate);
            this.$refs[register].validate((valid) => {
                if (valid) {
                    console.log(this.register);
                } else {
                    console.log("err");
                    return false;
                }
            });
        },
        upFaceImg(register) {
            const video = this.$refs.video;
            const canvas = this.$refs.canvas;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            // 将 canvas 内容转换为 Blob 对象
            canvas.toBlob((blob) => {
                const formData = new FormData();
                formData.append("image", blob);
                formData.append("name",this.register.username);

                // 发送文件到后端
                fetch("http://127.0.0.1:5000/add_face_image", {
                    method: "POST",
                    body: formData
                })
                    .then((response) => response.json())
                    .then((data) => {
                        console.log(data);
                        if (data.error){
                            this.$message.warning("未检测到人脸")
                            return false;
                        }else{
                            this.registerBtn(register)
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            }, "image/jpeg");
            return false
        },
        registerBtn(register) {
            this.$refs[register].validate((valid) => {
                if (valid) {
                    this.iconstyle = "el-icon-loading";
                    this.disabled = true;
                    this.axios
                        .post("http://localhost:9151/user/register", {
                            email: this.register.email,
                            userName: this.register.username,
                            password: this.register.password,
                            sex: this.register.gender,
                            phone: this.register.phone,
                        })
                        .then((res) => {
                            if (res.data.code == 200) {
                                this.iconstyle = "el-icon-check";
                                this.btnType = "success";
                                setTimeout(() => {
                                    this.disabled = false;
                                    this.$router.push("/login");
                                }, 2000);
                            } else {
                                this.iconstyle = "el-icon-close";
                                this.btnType = "danger";
                                this.$message({
                                    message: res.data.data,
                                    type: "error",
                                });
                                setTimeout(() => {
                                    this.disabled = false;
                                    this.iconstyle = "el-icon-document-checked";
                                    this.btnType = "primary";
                                }, 2000);
                            }
                        })
                        .catch((res) => {
                            console.log(res);
                            this.iconstyle = "el-icon-close";
                            this.btnType = "danger";
                            setTimeout(() => {
                                this.disabled = false;
                                this.iconstyle = "el-icon-document-checked";
                                this.btnType = "primary";
                            }, 2000);
                        });
                } else {
                    console.log("error submit!!");
                    this.iconstyle = "el-icon-close";
                    this.btnType = "danger";
                    setTimeout(() => {
                        this.disabled = false;
                        this.iconstyle = "el-icon-document-checked";
                        this.btnType = "primary";
                    }, 2000);
                    return false;
                }
            });
        },
    },
};
</script>

<style scoped="scoped">
.register-bg {
    background: rgb(65, 105, 225);
    height: 20vh;
    background-size: 100%;
    border: 0px solid transparent;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.text {
    font-size: 14px;
}

.item {
    /* padding: 18px 0; */
}

.register-card {
    margin: -5rem 1rem 1rem 1rem;
}

.register-title {
    font-size: 2rem;
    font-weight: lighter;
    margin-top: 1rem;
}

.wrapper {
    min-height: 90vh;
}

.el-main {
    max-height: 90vh;
}

#app {
    overflow: hidden;
}

.registerbtn {
    /* margin-top: 2rem; */
}

.register a,
.register div {
    color: #409eff;
}

.register p {
    margin: 0.5rem;
}
</style>
